<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Evaluator - GeoGebra</title>
    <meta property="og:title" content="Evaluator - GeoGebra" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
    <meta name="description" content="Editor demo.">
    <script type="text/javascript" language="javascript" src="editor/editor.nocache.js"></script>
    <link rel="shortcut icon" href="https://www.geogebra.org/apps/icons/geogebra.ico" type="image/x-icon">
    <link rel="icon" href="https://www.geogebra.org/apps/icons/geogebra.ico" type="image/x-icon">
    <style>
        body,html {
            margin:0;
            padding:0;
        }
        main {
            width:300px;
            min-height:50px;
            border:1px blue solid;
            margin: 1em;
        }
    </style>
</head>
<body dir="ltr" tabindex="-1">
<main id="main1" data-param-editorBackgroundColor="yellow" data-param-maxHeight="50"></main>
<main id="main2" data-param-editorBackgroundColor="green"></main>
<main id="main3"></main>
<script>
    function renderGGBElementReady() {
        renderGGBElement(document.querySelector("#main1"), api => {
            api.registerClientListener(evt => {
                console.trace(evt);
            });
        });
        renderGGBElement(document.querySelector("#main2"));
        renderGGBElement(document.querySelector("#main3"));
    }
</script>
</body>
</html>
